<template>
    <div :class="!iserror? 'app-content' :''" id="app" >
        <div v-if="!iserror">
        <nav-bar :title="'账号'"/>
        <div>
            <div class="charge-title">问题分类：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <cube-select class="pay-input w-65_" v-model="appealData.question_type"
                         :options="propProblem">
            </cube-select>
            <div> <p  class="errorMessage"  v-show='errorMessage.question_type'>请选择问题分类</p></div>
            <div class="charge-title">问题详细描述：<img src="../../assets/star.png" width="5px" height="5px"> </div>
            <cube-textarea   v-model="appealData.desc" placeholder="请详细描述您的问题，方便快速帮您解决哦～" class="pay-textarea"  :maxlength="1000"></cube-textarea>


            <div> <p style="margin: 5px 5% 0px; color: red; font-size: 12px;"  v-show='errorMessage.desc'>请填写问题详细描述</p></div>
            <div> <p class="errorMessage"  v-show='exa.desc'>问题详细描述不得少于10字</p></div>
            <div class="charge-title">问题出现时间：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <div class="charge-order pay-time w_65_"  ref="getPayat">
                <div class="content edit-input"  @click='showDateTimePicker'>
                    {{pay_at}}
                </div>
                <div class="right-arrow" @click='showDateTimePicker'><i class="cube-select-icon"></i></div>
            </div>

            <div> <p class="errorMessage"   v-show='errorMessage.appear_at'>请选择问题出现时间</p></div>
            <div class="charge-title">上传图片<span class="wanrMessage"  >(上传相关图片，以便更快帮您解决)</span>：</div>
            <!-- 图片上传 -->
            <div class="upload-box">
                <cube-upload class="cube-upload" v-model="uploadfiles" :max="3" :action="upAction" :auto="false" :simultaneous-uploads="1" @files-added="filesAdded" @file-submitted="filesSubmitted" @file-success="filesSuccess" @file-error="fileError"/>
                <div class="upload">
                </div>
            </div>
            <div class="submit">
                <div>请确保以上信息填写无误，处理速度更快哦，<br><br>
                    结果请在<span class="color-Gold">客服</span>-><span class="color-Gold">反馈记录</span>中查看哟</div>
                <cube-button class="subbutton" @click="submitWorkOrder" :disabled="showLoading?true:false" >提交</cube-button>
            </div>
        </div>
        <div v-show='showLoading' class="showLoading"  >
            <cube-loading class="loading-div" :size="40"  ></cube-loading>
            <div class="loadingtext"  >{{loadingMsg}}</div>
        </div>
        </div>
        <error-page v-if="iserror" :iserror.sync="iserror"></error-page>
    </div>
</template>

<script>
    const dateFormat = require('dateformat')
    import {Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem} from 'vant'
    import NavBar from '@/components/customerService/NavBar.vue'
    import error from '@/pages/error/App.vue'
    import {  submitWorkOrder} from '@/api/customerService'
    import {dataNullFilter,dataDescLengthFilter,ckDesc} from '@/utils/ckData'
    import mixins from '@/model/mixins'
    export default {
        mixins: [mixins],
        components: {
            NavBar,
            'error-page':error,
            [Cell.name]: Cell,
            [Button.name]: Button,
            [DatetimePicker.name]: DatetimePicker,
            [Field.name]: Field,
            [Uploader.name]: Uploader,
            [Popup.name]: Popup,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        },
        watch:{
        'appealData.desc':function () {
            let desc=ckDesc(this.appealData.desc);
            this.appealData=Object.assign(this.appealData,{desc})
            this.$forceUpdate()
        }
        },
        data() {
            return {
                iserror:false,
                propProblem:this.$store.state.app.propProblem,
                appealData: {},
                uploadfiles: [],
                pay_at: '',
                loadingMsg:'',
                upAction: {
                    target: 'http://up-z2.qiniup.com',
                    data: new FormData()
                },
                filename: [],
                errorMessage:{
                    question_type:false,
                    appear_at:false,
                    desc:false,
                },
                showLoading: false,
                iserrordata:false,
                iserrorDescLength:false,
                exa:{
                    desc:false,
                },
                filenameNew: []
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            submitWorkOrder() {
                this.loadingMsg="正在提交中..."
                this.appealData.images = this.filenameNew
                this.errorMessage=dataNullFilter(this.appealData,this.errorMessage,this);
                this.exa=dataDescLengthFilter(this.appealData,this.exa,this.errorMessage,this);
                this.$forceUpdate()
                if(this.iserrordata){
                    return;
                }
                else if(this.iserrorDescLength){
                    return;
                }
                else{
                    this.showLoading = true
                Object.assign(this.appealData,{type_id:3})
                    submitWorkOrder(this.appealData).then(res => {
                        if (res.status === 0) {
                            const QuerySerch = location.search
                            location.href = `/success_cs${QuerySerch}`
                        }
                    }).catch(error =>{
                        this.showLoading = false
                        if(error.response.data.status==-400) {
                            this.iserror=true
                        }
                    })
                }
            },
            selectHandle(date, selectedVal) {
                Object.assign(this.appealData,{appear_at: dateFormat(date, 'yyyy-mm-dd HH:MM:ss')})
                this.pay_at =  dateFormat(date, 'yyyy-mm-dd HH:MM:ss')
            },


        },
        beforeDestroy () {
        },
    }
</script>
